<template>
    <div class="shopcar-container">
        <!-- 商品列表区域     -->
        <div class="goods-list" v-for="item in goodslist" :key="item.id">
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					<mt-switch></mt-switch>	
                    <img :src="item.img_url" alt="">
                    <div class="info">
                        <h1>{{item.title}}</h1>
                        <p>
                            <span class="price">￥{{item.sell_price}}</span>
                            <numbox :initcount="$store.getGoodsCount"></numbox>
                            <a href="#">删除</a>   
                        </p>
                    </div>
					</div>
				</div>
			</div>
        </div>
        <!-- 结算区域 -->
       <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
              <p>总计（不含运费）</p>
              <p>已勾选商品 <span class="red">1</span> 件， 总价 <span class="red">￥9999</span></p>
            </div>
             <mt-button type="danger">去结算</mt-button>
					</div>
				</div>
			</div>


      <p></p>

    </div>
</template>

<script>
import numbox from '../subcomponents/shopcar_numbox.vue'
export default {
    data(){
        return { 
            // goodslist: []        //购物车中所有商品的数据
            //模拟数据
            goodslist: [         
                {id:1,title:'小米22 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,count:1},
                {id:2,title:'小米23 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,count:1},
                {id:3,title:'小米24 全网通版 4GB内存 64GB',img_url:'/src/images/xiaomipb.jpg',sell_price:9999,count:1},
                {id:4,title:'小米25 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,count:1},
                {id:5,title:'小米26 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,count:1},
                {id:6,title:'小米27 全网通版 4GB内存 64GB',img_url:'/src/images/xiaomipb.jpg',sell_price:9999,count:1},
                {id:7,title:'小米28 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,count:1},
                {id:8,title:'小米29 全网通版 4GB内存 64GB',img_url:'/src/images/xiaomipb.jpg',sell_price:9999,count:1},
                {id:9,title:'小米S9++ 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,count:1},
                {id:10,title:'小米S10++ 全网通版 4GB内存 64GB',img_url:'/src/images/xiaomipb.jpg',sell_price:9999,count:1},
                {id:11,title:'小米S20++ 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,count:1},

            ] 
        }
    },
    created() {
        //this.getGoodsList(); // 有数据的时候可以调用
    },
    methods:{
        // getGoodsList(){         有数据的时候可以调用
        //     //获取到 store 中所有的商品的ID
        //     var idArr = []
        //     this.$store.state.car.forEach(item => idArr.push(item.id));
        //     if (idArr.length <= 0) {  //如果购物车中没商品，则直接返回
        //         return 
        //     }
        //     this.$http.get('api/goods/getshopcarlist/'+idArr.join(","))
        //     .then(result =>{
        //         if(result.body.status === 0){
        //             this.goodslist = result.body.message
        //         }
        //     })
        // }
    },
    components:{
        numbox
    }
}


</script>
<style lang="scss" scoped>
.shopcar-container{
    background-color: #eee;
    overflow: hidden;
    .goods-list{
        .mui-card-content-inner{
            display: flex;
            align-items: center;
        }
        img{
            width: 60px;
            height: 60px;
        }
        h1{
                font-size: 13px;
            }
        .info{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            p{
                .price{
                    color: red;
                    font-weight: 700;
                }
                a{
                    font-size: 12px;
                }
            }
        }
    }
    .jiesuan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .red {
      color: red;
      font-weight: bold;
      font-size: 16px;
    }
  }
}


</style>
